<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .meaningful{
            background: url("3_1.jpg");
            background-size: cover;
            padding: 1em;
            width: 21em;
            resize: both;
            padding: 1em;
        }
        .meaningful > div{
            height: 100%;
            background: white;

        }
        .meaningful1{
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
            url('3_1.jpg') border-box  0 / cover;
            width: 21em;
            padding: 1em;
            overflow: hidden;
            resize: both;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }


        .msg{
            width: 300px;
            padding: 1em;
            border: 1px solid transparent;
            background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
                    #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;
            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
            animation: ants 6s linear infinite;
        }
        @keyframes ants {
            to {background-position: 100%}
        }


    </style>
</head>
<body>
    <h1>连续的图像边框</h1>
     <div class="meaningful">
         <div>i have a nice to aborder,
          dont i look pretty?
         </div>
     </div>
    <br>
    <br>
    <div class="meaningful1">ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham hock. Sausage beef beef ribs aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna salami t-bon</div>
    <br>
    <br>
    <div class="msg">Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham hock. Sausage beef beef ribs aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna salami t-bone.</div>
</body>
</html>
